<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { ClickOutside } from 'element-plus'
import { useStatementStore } from '@/store'

defineProps<{
  left: number
  top: number
}>()
defineEmits(['del-row', 'prepend-row', 'append-row'])

const statementStore = useStatementStore()
const { visible } = storeToRefs(statementStore)
const { setVisible } = statementStore

const vClickOutside = ClickOutside

function clickOutsideCallback() {
  setVisible(false)
}
</script>

<template>
  <Teleport to="body">
    <ul
      v-if="visible"
      v-click-outside="clickOutsideCallback"
      :style="{ left: `${left}px`, top: `${top}px` }"
      class="contextmenu"
    >
      <li style="color: var(--el-color-danger)" @click="$emit('del-row')">
        删除当前行
      </li>
      <li class="divider" />
      <li @click="$emit('prepend-row')">
        在上方插入一行
      </li>
      <li @click="$emit('append-row')">
        在下方插入一行
      </li>
    </ul>
  </Teleport>
</template>
